  <!--
 * @Author: alenjzhang
 * @Date: 2024-04-21 16:58:45
 * @Description: 服务详情
-->
<script setup lang="ts">
// const props = defineProps < {
//   title: string;
// }>();

const show = ref(false);
</script>

<template>
  <view>
    <slot>
      <view @click="show = true">
        预览
      </view>
    </slot>
    <!-- <nut-icon v-if="show" name="close" class="position-fixed color-white right-0 top-0" @click="show = false" /> -->
    <nut-overlay v-model:visible="show" overlay-class="swiper-wrap">
      <div class="flex items-center justify-center h-100vh position-relative">
        <swiper
          class="swiper" circular :indicator-dots="true"
        >
          <swiper-item>
            <video src="https://ghky-1302523197.cos.ap-chongqing.myqcloud.com/1/930d8ae8-a35e-4b8e-a091-fe73daac39ff.mp4" />
          </swiper-item>
          <swiper-item>
            <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="">
          </swiper-item>
          <swiper-item>
            <img src="https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg" alt="">
          </swiper-item>
        </swiper>
      </div>
    </nut-overlay>
  </view>
</template>

<style lang="scss">
// .nut-icon {
//   position: fixed;
//   inset: 0;
//   right: 20rpx;
//   top: 40rpx;
//   color: #666;
//   z-index: 99999;
// }
.swiper {
  width: 100%;
  height: 600rpx;
  image, video {
    width: 100%;
    object-fit: contain;
  }
}
</style>

<route lang="json">
</route>
